<template>
	<div class="cmt-container">
		<h3>发表评论</h3>
		<hr>
		<textarea placeholder="请输入要BB的内容(最多BB120个字)" maxlength="120" v-model="msg"></textarea>
		<mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

		<div class="cmt-list">
			<div class="cmt-item" v-for="(item, i) in comments" :key="item.add_time">
				<div class="cmt-title">
					第{{ i+1 }}楼&nbsp;&nbsp;用户:{{ item.user_name }}&nbsp;&nbsp;发表时间: {{ item.add_time | dateFormat }}
				</div>
				<div class="cmt-body">
					{{ item.content === 'undefined' ? '此用户很懒,嘛都没说' : item.content }}
				</div>
			</div>
		</div>

		<mt-button type="danger" size="large"  plain @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	export default {
		data(){
			return {
				pageindex: 1,  //默认展示第一页数据
				comments: [], //所有的评论数据
				msg: '' //评论输入的内容  默认为空
			}
		},
		created(){
			this.getComments()
		},
		methods:{
			getComments(){  //获取评论
				this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageindex ).then(result => {
					if( result.body.status === 0){
						// 为了防止新数据 覆盖 老数据的情况, 我们在点击加载更多的时候, 应该让老数据调用数组的concat()方法, 拼接上新数组
						this.comments = this.comments.concat(result.body.message)
					}else{
						Toast('获取评论列表失败')
					}
				})
			},
			getMore(){  //加载更多
				this.pageindex++
				this.getComments()
			},
			postComment(){  //发表评论
				//首先先校验是否为空内容
				if(this.msg.trim().length === 0) {
					return Toast('评论内容不能为空')
				}

				//参数1： 请求的URL地址
				//参数2： 提交给服务器的数据对象 { content: this.msg }
				//参数3:  定义提交时候, 表单中的数据格式 { emulateJSON: true } 可以在全局中配置
				//trim()方法用于删除字符串的头尾空格
				this.$http.post('api/postcomment/' + this.$route.params.id, { content: this.msg.trim() }).then( result => {
					if (result.body.status === 0){
						//拼接出一个评论对象  追加到comments数组中
						this.comments.unshift({ user_name: "匿名用户", add_time: Date.now(), content: this.msg.trim() })	
						//情况评论内容
						this.msg = ''
					}else{
						Toast('发表评论失败')
					}
				})
			}
		},
		props: ['id']
	}
</script>

<style lang="scss" scoped>
	.cmt-container{
		h3{
			font-size: 18px;
		}
		textarea{
			font-size: 14px;
			height: 85px;
			margin: 0;
		}

		.cmt-list{
			margin: 5px 0;
			.cmt-item{
				font-size: 13px;
				.cmt-title{
					background-color: #ccc;
					line-height: 30px;
				}
				.cmt-body{
					line-height: 35px;
					/*缩进*/
					text-indent:2em;
				}
			}
		}
	}
</style>